<style lang="scss" scoped>
</style>

<template>
  <common-page-template
    v-bind="pageData"
    :columns="columns"
    @page-change="pageChange"
  >
    <template #search>
      <platform-search @submit="handleSubmit"/>
    </template>
    <template #btns>
      <el-button @click="showModal('add')" type="primary">新增</el-button>
      <!-- <el-button type="danger">删除</el-button> -->
    </template>
    <add-plat-modal
      width="850px"
      :title="optType === 'add' ? '新增平台' : '平台编辑'"
      :type="optType"
      :curForm="curForm"
      v-model:show="showAddModal"
      @success="handleSubmit"
    />
  </common-page-template>
</template>

<script setup>
import AdminAds from './componet/adminAds.vue'
import PlatformSearch from "./componet/platformSearch.vue";
import AddPlatModal from './componet/platformModal/index.vue'
import { ref, h, onMounted } from "vue";
import CommonStatus from "@/components/commonStatus.vue";
import CommonOptionBtns from "@/components/commonOptionBtns.vue";
import { RoleDelete } from "@/apis/role";
import { RoleStatusMap } from "@/enums/index";
import { formateTime } from '@/utils/time'
import usePage from "@/hooks/usePage";
import { ElMessage } from "element-plus";
import { PagePlatform, DelPlatform } from '@/apis/platform'
const { pageData, handleQuery, pageChange } = usePage(
  PagePlatform,
  "records"
);
const columns = [
  {
    prop: "id",
    label: "平台ID",
    width: 100,
    align: "center",
  },
  {
    prop: "platformName",
    label: "平台名称",
    minWidth: 120,
    align: "center",
  },
  {
    prop: "manageUrl",
    label: "管理后台",
    minWidth: 120,
    align: "center",
    render: (row) => {
      return h(AdminAds, {
        ads: row.manageUrl,
      })
    }
  },
  {
    prop: "platformNum",
    label: "账户数",
    width: 120,
    align: "center",
  },
  {
    label: "状态",
    width: 120,
    align: "center",
    render: (row) => {
      return h(CommonStatus, { ...(RoleStatusMap[row.state] || {}) });
    },
  },
  {
    label: "创建时间",
    width: 170,
    align: "center",
    render: (row) => {
        return h('span', formateTime(row.createdTime))
    },
  },
  {
    prop: "name",
    label: "操作",
    minWidth: 120,
    align: "center",
    render: (row, column, $index) => {
      return h(CommonOptionBtns, {
        btnList: [
          { type: "primary", size: "small", text: "编辑", eventName: "edit" },
          {
            type: "info",
            size: "small",
            text: "删除",
            eventName: "del",
            prop: { title: "确认删除该平台?" },
          },
        ],
        onBtnClick: (eventName) => {
          if (eventName === "edit") {
            // 编辑
            showModal("edit", row);
          }
          if (eventName === "del") {
            console.log("eventName: ", eventName);
            DelPlatform(row.id).then(() => {
              ElMessage({
                message: "删除成功",
                type: "success",
              });
              handleSubmit();
            });
          }
        },
      });
    },
  },
];
const handleSubmit = (formData) => {
  pageData.formData = formData;
  handleQuery();
};
onMounted(() => {
  handleQuery();
});

const optType = ref("add");
const curForm = ref("");
const showAddModal = ref(false);
const showModal = (type, forms = "") => {
  optType.value = type;
  showAddModal.value = true;
  curForm.value = forms;
};
</script>

